<template>
    <view class="wid-100 hei-100" style="display: flex;align-items: center;justify-content: center;">
        <view class='box'>
            <view class="sun">
                <image src="../../static/img/sun.png" alt="" class='sunbody'>
                    <image src="../../static/img/eye.png" alt="" class='eye'>
            </view>
            <text class="tip">loading...</text>
        </view>
    </view>
</template>

<script>
    import { storage } from '@/common/lib/fun.js'
    export default {
        data() {
            return {

            }
        },
        mounted() {
            var t = this
            let token = storage(t.$cfg.sys + '_token');
            if (t.f.isnull(token) == '') {
                setTimeout(() => {
                    // #ifdef APP
                    t.f.nav('/pages/login/login', 'R')
                    // #endif
                    // #ifdef H5
                    t.f.nav('/pages/login/login', 'R')
                    // #endif
                    // #ifdef MP-WEIXIN
                    t.f.nav('/pages/AuthorizedLogin/AuthorizedLogin', 'R')
                    // #endif
                }, 2000);
                if (t.f.isnull(token) != '') {

                }
            } else {
                t.$api.req_post('clientUser/getUserByToken_v2', { token: token, subId: 119 }, 'form', false).then(res => {
                    console.log(res);
                    if (res.success) {
                        // t.infolist = res.result.records
                        // t.$cfg.user(res.obj.info)
                        // t.$cfg.userlist(res.obj.list)
                        t.$cfg.token(res.result.token)
                        t.$cfg.user(res.result.info)
                        t.$cfg.userlist(res.result.list)
                    }
                })
                setTimeout(() => {
                    t.f.nav('/pages/home/home', 'R')
                }, 2000);

            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .box {
        width: 306rpx;
        height: 113rpx;
        // margin: 300rpx auto 0;
        background: url(../../static/img/1.png) no-repeat left bottom;
        background-size: contain;
        position: relative;
    }

    .sun {
        width: 136rpx;
        height: 136rpx;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: -1;
        animation: move 2.7s infinite linear;
    }

    .sun .eye {
        position: absolute;
        top: 28%;
        left: 33%;
        width: 22rpx;
        height: 6rpx;
        animation: eye 2.7s infinite linear;
    }

    .sun .sunbody {
        width: 136rpx;
        height: 136rpx;
        animation: scroll 2.7s linear infinite;
    }

    .box .tip {
        text-align: center;
        padding: 0 100rpx;
        font-family: '苹方';
        font-size: 25rpx;
        color: #7a5600;
        animation: opp 2.7s infinite linear;
    }

    @keyframes move {
        0% {
            transform: translateY(0);
        }

        10% {
            transform: translateY(0);
        }

        40% {
            transform: translateY(-55rpx);
        }

        70% {
            transform: translateY(-55rpx);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes scroll {
        0% {
            transform: rotate(0);
        }

        40% {
            transform: rotate(0);
        }

        50% {
            transform: rotate(45deg);
        }

        60% {
            transform: rotate(45deg);
        }

        100% {
            transform: rotate(45deg);
        }
    }

    @keyframes eye {
        0% {
            transform: translateX(0rpx);
        }

        50% {
            transform: translateX(0rpx) scale(1, 1);
        }

        55% {
            transform: translateX(0rpx) scale(1, 0.1);
        }

        60% {
            transform: translateX(0rpx) scale(1);
        }

        70% {
            transform: translateX(26rpx);
        }

        100% {
            transform: translateX(26rpx);
        }
    }

    @keyframes opp {
        0% {
            opacity: 1;
        }

        40% {
            opacity: 1;
        }

        60% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
</style>